import React, { useEffect, useState, useRef } from 'react'
import styles from './login.less'
import Step1 from './step1'
import Step2 from './step2'
import close from '../../assets/icon/close.png'
import { useDispatch } from 'dva'

function Index() {
  const ref = useRef()
  const [stepIndex, setStepIndex] = useState(1)
  const dispatch = useDispatch()

  function submit() {
    // setStepIndex(stepIndex + 1)

    
    dispatch({
      type: 'index/apiGetUserSelf'
    })
    dispatch({
      type: 'index/setState',
      payload: {
        loginModalShow: false
      }
    })
  }
  // function complete() {
  //   // setStepIndex(stepIndex + 1)
  // }
  function onClose() {
    dispatch({
      type: 'index/setState',
      payload: {
        loginModalShow: false
      }
    })
  }
  return (
    <div className={styles.box}  >
      <img src={close} className={styles.close} onClick={onClose}></img>
      {
        stepIndex == 1 && <Step1 onNext={submit} />
      }
      {
        stepIndex == 2 && <Step2 />
      }

    </div>
  )
}

export default Index
